<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>链式调用</title>
  </head>
  <body></body>
  <script>
    // 实现一个计数的过程 比如 counter.add(2).minus(3).get() = ?

    // 面向过程常规写法 单独调用
    var num = 0;
    // 计数功能，每次加一
    function add() {
      num++;
    }
    // 计数功能，每次减一
    function minus() {
      num--;
    }
    // 查看结果
    function get() {
      return num;
    }
    add();
    add();
    minus();
    console.log(get());

    // 面向对象写法，可以链式调用
    // 在函数的最后返回当前函数调用对象 this
    var counter = {
      num: 5,
      add: function (n) {
        this.num += n;
        return this;
      },
      minus: function (n) {
        this.num -= n;
        return this;
      },
      get: function () {
        return this.num;
      },
    };
    console.log(counter.add(2).add(3).minus(4).get());

    // 原型对象写法，不推荐
    Number.prototype.add = function add(num) {
      return this + num;
    };
    Number.prototype.minus = function minus(num) {
      return this - num;
    };
    console.log((5).add(2).minus(3));
  </script>
</html>
